<style include="diagnostics-shared diagnostics-fonts">
  :host {
    --divider-horizontal-height: 100%;
  }
</style>
<div id="wifiInfoContainer">
  <div class="horizontal-data-point-container">
    <div class="data-point-container">
      <data-point id="ipAddress" header="[[i18n('networkIpAddressLabel')]]"
          value="[[network.ipConfig.ipAddress]]"
          orientation="horizontal">
      </data-point>
      <data-point id="ssid" header="[[i18n('networkSsidLabel')]]"
          value="[[network.typeProperties.wifi.ssid]]"
          orientation="horizontal">
      </data-point>
      <data-point id="bssid" header="[[i18n('networkBssidLabel')]]"
          value="[[network.typeProperties.wifi.bssid]]"
          orientation="horizontal">
      </data-point>
    </div>
    <div class="divider-horizontal"></div>
    <div class="data-point-container">
      <data-point id="security" header="[[i18n('networkSecurityLabel')]]"
          value="[[security_]]"
          orientation="horizontal">
      </data-point>
      <data-point id="signalStrength"
          header="[[i18n('networkSignalStrengthLabel')]]"
          value="[[signalStrength_]]"
          orientation="horizontal">
      </data-point>
      <data-point id="channel" header="[[i18n('networkChannelLabel')]]"
          value="[[getChannelDescription_(
            network.typeProperties.wifi.frequency)]]"
          orientation="horizontal">
      </data-point>
    </div>
  </div>
</div>
